<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>079-HTML5-SSE</title>
</head>

<body>
    <!-- HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 -->

    <!-- Server-Sent 事件 - 单向消息传递 -->
    <!-- Server-Sent 事件指的是网页自动获取来自服务器的更新。 -->
    <!-- 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。 -->
    <!-- 例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。 -->

    <!-- EventSource 对象用于接收服务器发送事件通知 -->
    <h1>获取服务端更新数据</h1>
    <div id="result"></div>

    <script>
        // 检测 Server-Sent 事件支持
        if (typeof (EventSource) !== "undefined") {
            // 浏览器支持 Server-Sent
            // 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
            var source = new EventSource("demo_sse.php");
            // 每接收到一次更新，就会发生 onmessage 事件
            source.onmessage = function (event) {
                // 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
                document.getElementById("result").innerHTML += event.data + "<br>";
            };
        }
        else {
            // 浏览器不支持 Server-Sent..
            document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
        }
    </script>
</body>

</html>